<template>
  <div class="shuttle-single-warp">
    <el-row>
      <el-col :span="11">
        <div class="shuttle-left">
          <div class="header-wrap">
            <div>待选列表</div>
            <div>
              {{ leftAutoStatistical }}
            </div>
          </div>
          <div class="layout-list-wrap">
            <div class="layout_search" v-if="isSearch">
              <el-input v-model.trim="notSelectedInput" placeholder="请输入内容" @keyup.enter.native="search(notSelectedInput, 'notSelected')">
                <sky-icon-font name="Search" slot="suffix" @click="search(notSelectedInput, 'notSelected')"></sky-icon-font>
              </el-input>
            </div>
            <div class="layout-list">
              <template v-for="(item) in leftSingleConfig.listData">
                <label :for="[`${randomdropdownId}leftcheckBox${item.id}`]" :key="item.id" class="list-item" v-if="keyword(item,notSelectedInput)" @dblclick.stop="leftDoubleClic(item)">
                  <label class="checkbox_wrap">
                    <input @click.stop="" @dbclick.stop="" type="checkbox" v-model="item.check" :id="[`${randomdropdownId}leftcheckBox${item.id}`]" />
                    <span class="span_checkbox"> </span>
                  </label>
                  <div class="content">{{ item.name }}</div>
                </label>
              </template>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="shuttle-center">
          <div class="shuttle-center-container">
            <div @click="leftToRight" :style="leftChoose">
              <img src="~@/low-code/assets/shuttle-right.png" alt="" />
            </div>
            <div @click="rightToLeft" :style="rightChoose">
              <img src="~@/low-code/assets/shuttle-left.png" alt="" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="shuttle-right">
          <div class="header-wrap">
            <div>已选列表</div>
            <div>
              {{ rightAutoStatistical }}
            </div>
          </div>
          <div class="layout-list-wrap">
            <div class="layout_search" v-if="isSearch">
              <el-input v-model.trim="selectedInput" placeholder="请输入内容" @keyup.enter.native="search(selectedInput, 'selected')">
                <sky-icon-font name="Search" slot="suffix" @click="search(selectedInput, 'selected')"></sky-icon-font>
              </el-input>
            </div>
            <div class="layout-list">
              <template v-for="(item) in rightSingleConfig.listData">
                <label :key="item.id" @dblclick.stop="rightDoubleClic(item)" class="list-item" :for="[`${randomdropdownId}rightcheckBox${item.id}`]" v-if="keyword(item,selectedInput)">
                  <label class="checkbox_wrap">
                    <input @click.stop="" @dbclick.stop="" type="checkbox" v-model="item.check" :id="[`${randomdropdownId}rightcheckBox${item.id}`]" />
                    <span class="span_checkbox"> </span>
                  </label>
                  <div class="content">{{ item.name }}</div>
                </label>
              </template>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import clone from "clone"

  export default {
    props: {
      leftSingleConfig: {
        type: Object,
        default () {
          return {
            listData: [],
          };
        },
      },
      rightSingleConfig: {
        type: Object,
        default () {
          return {
            listData: [],
          };
        },
      },
      isSearch: {
        type: [Boolean, String],
        default: false,
      },
    },
    data () {
      return {
        leftAllcheck: false,
        rightAllcheck: false,
        notSelectedInput: "",
        selectedInput: "",
        randomdropdownId: ""
      };
    },
    computed: {

      leftChoose () {
        let flag = this.leftSingleConfig.listData.some((item) => {
          return item.check;
        });
        return {
          opacity: flag > 0 ? 1 : 0.4,
        };
      },
      rightChoose () {
        let flag = this.rightSingleConfig.listData.some((item) => {
          return item.check;
        });
        return {
          opacity: flag > 0 ? 1 : 0.4,
        };
      },
      leftAutoStatistical () {
        let nowSelect =
          this.leftSingleConfig.listData.filter((item) => item.check).length || 0;
        let allNumber = this.leftSingleConfig.listData.length || 0;
        return `${nowSelect}/${allNumber}`;
      },
      rightAutoStatistical () {
        let nowSelect =
          this.rightSingleConfig.listData.filter((item) => item.check).length ||
          0;
        let allNumber = this.rightSingleConfig.listData.length || 0;
        return `${nowSelect}/${allNumber}`;
      },
    },
    methods: {
      /**
     * @function randomdropdown
     * @deprecated 随机字符
     */
      randomdropdown () {
        let len = 8;
        let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz";
        let maxPos = $chars.length;
        let id = "";
        for (let i = 0; i < len; i++) {
          id += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return id;
      },
      keyword (data, keyWords) {
        let key = keyWords ? keyWords : ''
        let result = false;
        if (key.length > 0) {
          let Len = data.name.split(key).length;
          return Len > 1 ? !result : result
        } else {
          return !result
        }
      },
      isRightHas (unit) {
        return this.rightSingleConfig.listData.some(item => item.id == unit.id) || false
      },
      leftToRight () {
        let awaitPush = [];
        let ids = [];
        // eslint-disable-next-line no-unused-vars
        for (const [index,item] of this.leftSingleConfig.listData.entries()) {
          if (item.check) {
            if (this.isRightHas(item)) {
              item.check = false;
              continue;
            }
            ids.push(item.id);
            item.check = false;
            let deepItem = clone(item)
            awaitPush.push(deepItem);
          }
        }

        this.rightSingleConfig.listData = [
          ...this.rightSingleConfig.listData,
          ...awaitPush,
        ];
      },
      rightToLeft () {
        let awaitPush = [];
        let ids = [];
        // eslint-disable-next-line no-unused-vars
        for (const [index,item] of this.rightSingleConfig.listData.entries()) {
          if (!item.check) {
            ids.push(item.id);
            awaitPush.push(clone(item));
          }
        }

        this.rightSingleConfig.listData = awaitPush
      },
      leftDoubleClic (unit) {
        unit.check = false;
        if (this.isRightHas(unit)) {
          return;
        }
        this.rightSingleConfig.listData = [
          ...this.rightSingleConfig.listData,
          clone(unit),
        ];
      },
      rightDoubleClic (unit) {
        unit.check = false;
        let index = this.rightSingleConfig.listData.findIndex(item => item.id == unit.id)
        this.rightSingleConfig.listData.splice(index, 1)
      },
      leftAllChoose (check) {
        this.leftSingleConfig.listData.map((item) => {
          this.$set(item, "check", check);
        });
      },
      rightAllChoose (check) {
        this.rightSingleConfig.listData.map((item) => {
          this.$set(item, "check", check);
        });
      },
      search (data, type) {
        switch (type) {
          case "notSelectedInput":
            break;
          case "selectedInput":
            break;
        }
      },
    },
    mounted () {
      this.randomdropdownId = this.randomdropdown()
    }
  };
</script>

<style scoped lang="scss">
/* table */
/* 全屏按钮-背景-颜色 */
$table-screenfullicon-backgroundColor:rgba(75, 95, 121, 1);
/* 边框-颜色 */
$table-borderColor:#e6e6e6;
/* 文字-th-颜色 */
$table-th-fontColor:#999;
/* 背景-th-颜色 */
$table-th-backgroundColor:#f6f6f6;
/* 文字-td-颜色 */
$table-td-fontColor:#323232;
/* 背景-th-颜色 */
$table-td-backgroundColor:#fff;
/* 边框-固定行列-颜色 */
$table-fixed-borderColor:#e6e6e6;

/* 选中-tr-背景-颜色 */
$table-tr-selected-backgroundColor:#F7F9FF;

/* 链接-颜色 */
$table-a-fontColor:#1890ff;
/* 多选框-边框-圆角弧度 */
$table-checkbox-borderRadius:3px;
/* 多选框-边框-颜色 */
$table-checkbox-borderColor:#dcdcdc;
/* 多选框-背景-颜色 */
$table-checkbox-backgroundColor:#fff;
/* 多选框-选中-边框-颜色 */
$table-checkbox-checked-borderColor:#1890ff;
/* 多选框-选中-背景-颜色 */
$table-checkbox-checked-backgroundColor:#1890ff;
/* 多选框-选中-item-边框-颜色 */
$table-checkbox-item-checked-borderColor:#ffffff;
/* 多选框-禁止-边框-颜色 */
$table-checkbox-disabled-borderColor:#dcdcdc;
/* 多选框-禁止-背景-颜色 */
$table-checkbox-disabled-backgroundColor:#f5f5f5;

/* 全屏-背景-颜色 */
$table-isFullscreen-backgroundColor:rgba(0, 0, 0, 0.9);
/* 全屏-按钮-背景-颜色 */
$table-isFullscreen-button-backgroundColor:#4b5f79;

/* 穿梭框-按钮--颜色 */
$table-shuttle-button-backgroundColor:#1890ff;
/* 穿梭框-按钮-圆角 */
$table-shuttle-button-borderRadius:3px;

.shuttle-single-warp {
  & ::v-deep .table-containter {
    height: 220px !important;
  }
  .layout_search {
    padding: 10px 10px 5px 10px;
  }
  .layout-list-wrap {
    border-bottom: 1px solid $table-borderColor;
    border-left: 1px solid $table-borderColor;
    border-right: 1px solid $table-borderColor;
    .layout-list {
      padding: 0 10px;
      min-height: 180px;
      max-height: 240px;
      overflow: auto;
      .list-item {
        height: 35px;
        position: relative;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .checkbox_wrap {
          margin-top: 9px;
          float: left;
        }
        .content {
          display: block;
          width: calc(100% - 50px);
          line-height: 35px;
          cursor: pointer;
          margin-left: 21px;
        }
      }
    }
  }
  .checkbox_wrap {
    font-size: 0px;
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
    input[type="checkbox"] {
      position: absolute;
      left: 0px;
      width: 100%;
      top: 0px;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      z-index: 9;
    }
    input[type="checkbox"] + span {
      height: 16px;
      width: 16px;
      display: block;
      cursor: pointer;
    }
    input[type="checkbox"]:disabled + span {
      cursor: not-allowed;
    }
    input[type="checkbox"] + span::before {
      position: absolute;
      left: 0px;
      top: 0%;
      width: 16px;
      height: 16px;
      border: 1px solid $table-checkbox-borderColor;
      border-radius: $table-checkbox-borderRadius;
      box-sizing: border-box;
      content: "";
    }
    input[type="checkbox"]:checked + span::before {
      border: 1px solid $table-checkbox-checked-borderColor;
      background: $table-checkbox-checked-backgroundColor;
    }
    input[type="checkbox"]:checked + span::after {
      position: absolute;
      top: 7px;
      left: 4px;
      display: block;
      width: 3px;
      height: 7px;
      border: 2px solid $table-checkbox-item-checked-borderColor;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(1) translate(-50%, -50%);
      opacity: 1;
      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
      display: block;
      content: " ";
      -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
      -moz-transform: rotate(45deg) scale(1) translate(-50%, -50%);
      -ms-transform: rotate(45deg) scale(1) translate(-50%, -50%);
      -o-transform: rotate(45deg) scale(1) translate(-50%, -50%);
    }
    input[type="checkbox"]:disabled + span:before {
      border: 1px solid $table-checkbox-disabled-borderColor;
      background: $table-checkbox-disabled-backgroundColor;
    }
    input[type="checkbox"]:disabled:checked + span::after {
      border: 2px solid $table-checkbox-disabled-borderColor;
      border-top: 0;
      border-left: 0;
    }
  }

  .shuttle-center-container {
    padding-top: 50px;
    & > div {
      width: 24px;
      height: 24px;
      background: $table-shuttle-button-backgroundColor;
      margin: 10px auto;
      text-align: center;
      opacity: 1;
      border-radius: $table-shuttle-button-borderRadius;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    & > div img {
      height: 12px;
      align-items: center;
    }
  }
  .header-wrap {
    display: flex;
    line-height: 35px;
    padding: 0 12px;
    justify-content: space-between;
    border-top: 1px solid $table-borderColor;
    border-bottom: 1px solid $table-borderColor;
    border-left: 1px solid $table-borderColor;
    border-right: 1px solid $table-borderColor;
  }
}

[class*="col-"] {
  background: none;
}
</style>